<template>
	<view class="page">
		<view>
			<!-- 系统状态栏高度 -->
			<!-- #ifdef APP-PLUS -->
			<StatusBar v-if="loginType !='wxLogin'"></StatusBar>
			<!-- #endif -->
			<!-- 自定义导航栏 -->
			<!-- #ifdef APP-PLUS || H5 -->
			<view class="loginBar flex f-j-between f-a-center">
				<navigator open-type="navigateBack" hover-class="none"><close size="40" :color="loginType =='wxLogin'?'#ffffff':'#333333'"></close></navigator>
				<!-- <navigator open-type="navigate" url="/pages/user/register" hover-class="none" class="bar-right">新注册</navigator> -->
			</view>
			<view v-if="loginType !='wxLogin'" class="loginBar-bg"></view>
			<!-- #endif -->
			<block v-if="loginType=='wxLogin'">
				<view class="wxlogin-cont flex flex-wrap f-j-center">
					<image class="wxlogin-cont-img" src="../../static/images/user/copy-logo.png"></image>
					<view class="wxlogin-cont-text">恒朗源来</view>
				</view>
				<button class="wxlogin-btn flex f-a-center f-j-center" :loading="wxLoading" @tap="wxLogin">
					<block v-if="!wxLoading"><image  class="wxlogin-btn-icon" src="../../static/icons/jewel/wxlogin_icon.png"></image>微信登录</block>
				</button>
			</block>
			<block v-if="loginType=='userLogin'">
				<!-- 账号密码登录 -->
				<view class="logo-text">手机号码登录</view>
				<view class="account flex f-j-center flex-wrap">
					<view class="section"><input class="phone" type="number" :maxlength="11" v-model="mobile" placeholder="请输入手机号码" /></view>
					<view class="section flex f-j-between f-a-center">
						<input class="pwd flex1" password type="text" v-model="password" @input="pwdInput" @blur="isShowPwdClear" @focus="isShowPwdClear" placeholder="请输入密码" />
						<view class="flex f-a-center">
							<view class="pwd-clearText" :class="{'pwd-clearText-show':isShowClear}" @tap="clearText"><close size="30" color="#999999"></close></view>
							<navigator open-type="navigate" url="/pages/user/find_password" hover-class="none" class="pwd-forget">忘记密码</navigator>
						</view>
					</view>
				</view>
				
				<view class="flex f-j-center">
					<view 
						:class="[
							'loginBtn flex f-j-center f-a-center',
							{'loginBtnLoading':isRotate},
							{'loginBtnOpacity':mobile&&password}
							]" 
						@tap="login()"
						>
						<image src="../../static/icons/btnLoading.png" v-if="isRotate" :class="['btnLoading',{'rotate_loop':isRotate}]"></image>
						<text v-if="!isRotate" class="buttonText">登 录</text>
					</view>
				</view>
			</block>
			
			<block v-if="loginType=='idLogin'">
				<!-- id登录 -->
				<view class="logo-text">ID登录</view>
				<view class="account flex f-j-center flex-wrap">
					<view class="section"><input class="phone flex1" type="number" v-model="idNumber" placeholder="请输入ID号" /></view>
					<view class="section"><input class="pwd flex1" password type="number" v-model="idPassword" placeholder="请输入密码" /></view>
				</view>
				
				<view class="flex f-j-center">
					<view 
						:class="[
							'loginBtn flex f-j-center f-a-center',
							{'loginBtnLoading':isRotate},
							{'loginBtnOpacity':idNumber&&idPassword}
							]" 
						@tap="idLogin()"
						>
						<image src="../../static/icons/btnLoading.png" v-if="isRotate" :class="['btnLoading',{'rotate_loop':isRotate}]"></image>
						<text v-if="!isRotate" class="buttonText">登 录</text>
					</view>
				</view>
				
			</block>
			
			
			
		</view>
		<!-- 手机快捷登录 -->
		<!-- <view class="account flex f-j-center flex-wrap" v-if="!isToggle">
			<view class="section flex f-a-center">
				<input class="phone" type="number" :maxlength="11" v-model="mobile" placeholder="请输入手机号" placeholder-class="p-active" />
				<text class="getCodeBtn" type="default" @tap="getCode" :class="{ isColor: disable != true }">{{ count }}{{ btnMsg }}</text>
			</view>
			<view class="section"><input class="pwd" type="number" :maxlength="6" v-model="yzm" placeholder="请输入短信验证码" placeholder-class="p-active" /></view>
		</view> -->
		<!-- 登录方式 -->
		<!-- <view class="changType">
			<view class="flex f-j-center" v-if="!isToggle"><text class="btnText" @tap="loginChange">账号密码登录</text></view>
			<view class="flex f-j-center" v-if="isToggle"><text class="btnText" @tap="loginChange">手机快捷登录</text></view>
		</view> -->
		<!-- 第三方登录方式，请换成每个平台自身的appid -->
		<view>
			<view class="other-login" v-if="isGoodsTpye">
				<view class="other-title"><view class="line"></view><text class="title-text">其他登录方式</text></view>
				<view class="flex f-a-start f-j-center">
					<view class="login-item" v-if="loginType == 'userLogin' || loginType == 'idLogin'" @tap="changeLoginType('wxLogin')" >
						<image class="icon" src="@/static/icons/weixin.png"></image>
						<view class="text">微信登录</view>
					</view>
					<view class="login-item" v-if="loginType == 'wxLogin' || loginType == 'idLogin'" @tap="changeLoginType('userLogin')">
						<image class="icon" src="@/static/icons/jewel/wxlogin_phone.png"></image>
						<view class="text">手机登录</view>
					</view>
					<view class="login-item" v-if="id_login && (loginType == 'wxLogin' || loginType == 'userLogin')" @tap="changeLoginType('idLogin')">
						<image class="icon" src="@/static/icons/idlogin.png"></image>
						<view class="text">id登录</view>
					</view>
					<view class="login-item" @tap="changeLoginType('register')">
						<image class="icon" src="@/static/icons/jewel/c_user.png"></image>
						<view class="text">新用户注册</view>
					</view>
				</view>
			</view>
			
			<!-- 平台隐私政策、用户协议 -->
			<view class="agreement flex f-a-center f-j-center">
				<text class="text">登录即代表您已同意</text>
				<navigator open-type="navigate" hover-class="none" :url="'/pages/common/article?id='+article.registration_agreement">
					<text class="navigate">《恒朗源来用户使用及隐私政策》</text>
				</navigator>
			</view>
		</view>
		<view class="m-loading" v-if="showLoading">
			<image src="@/static/images/loading.gif" mode="widthFix"></image>
			<text>加载中</text>
		</view>
	</view>
</template>

<script>
	const TIME_COUNT = 60;
	import henglang from '@/common/common.js';
	import jewel from '@/common/common_zb.js';
	import md5 from '@/common/md5.js';
	export default {
		data() {
			return {
				mobile: '',
				yzm: '',
				password: '',
				btnMsg: '',
				isToggle: true,
				count: '获取验证码',
				timer: null,
				passwordType:'password',
				isShowClear: false,
				isRotate: false,
				showLoading: false,
				article:uni.getStorageSync('article'),
				postData:{},
				id_login:uni.getStorageSync('id_login'),
				isGoodsTpye: jewel.isGoodsTpye(),
				loginType: 'wxLogin',
				idNumber:'',
				idPassword:'',
				wxLoading:false
			}
		},
		onLoad() {
			if(!this.isGoodsTpye){
				this.loginType = 'userLogin'
			}
		},
		methods: {
			//常规登录
			login() {
				let that = this
				let send_data = {
					mobile: that.mobile,
					password: md5(that.password)
				}
				uni.hideKeyboard()
				if(!that.mobile||!that.password||that.isRotate){
					return false;
				}else if(!jewel.checkPhone(that.mobile)){
					jewel.showToast('请输入正确的手机号码')
					return false;
				}else{
					that.isRotate=true
					setTimeout(() => {
						jewel.post('auth/login',send_data,false,function(res){
							that.isRotate = false
							if (res.data.code == 0){
								jewel.showToast(res.data.msg,500)
								uni.setStorage({ // 保存登录状态
									key: 'token',
									data: res.data.data.token,
									success() {
										uni.setStorage({ // 保存用户的信息
											key: 'userInfo',
											data: res.data.data.member,
											success() {
												//注册设备
												henglang.regPush(true);
											}
										});
									}
								});
								setTimeout(() => {
									uni.navigateBack()
								}, 500)
							}else{
								jewel.showToast(res.data.msg);
							}
						},function(res){
							that.isRotate=false
						});
					}, 1000);
				}
			},
			//微信登录
			wxLogin() {
				let that = this;
				if(that.wxLoading) return false
			    uni.login({
			        provider: 'weixin',
			        success: function(loginInfoRes) {
						that.wxLoading = true
						that.postData.union_id = loginInfoRes.authResult.unionid;
						uni.getUserInfo({
						    provider: 'weixin',
						    success: function (infoRes) {
								jewel.post('auth/login',{union_id: loginInfoRes.authResult.unionid,openid:loginInfoRes.authResult.openid},false,function(res){
									switch(res.data.code){
										case '0':
											jewel.showToast(res.data.msg,500);
											uni.setStorage({ // 保存登录状态
												key: 'token',
												data: res.data.data.token,
												success() {
													uni.setStorage({ // 保存用户的信息
														key: 'userInfo',
														data: res.data.data.member,
														success() {
															//注册设备
															henglang.regPush(true);
														}
													});
												}
											});
											setTimeout(() => {
												uni.navigateBack()
												that.wxLoading = false;
											}, 500)
										break;
										case '-2':
										case '-3':
											jewel.showToast(res.data.msg,2000);
											that.postData.openid = infoRes.userInfo.openId;
											that.postData.nickname = infoRes.userInfo.nickName;
											that.postData.gender = infoRes.userInfo.gender;
											that.postData.head_pic = infoRes.userInfo.avatarUrl;
											uni.setStorage({ // 保存微信授权的信息
												key: 'wxauthInfo',
												data: that.postData
											});
											setTimeout(()=>{
												uni.navigateTo({
													url: '/pages/user/register'
												});
												that.wxLoading = false;
											},2000)
										break;
										default:
											jewel.showToast(res.data.code,500);
										break;
									}
								});
						    },
							fail:function(){
								that.wxLoading = false;
							}
						})
			        },fail:function(){
			        	that.wxLoading = false;
			        }
			    });
			},
			//id登录
			idLogin(){
				let that = this
				uni.hideKeyboard()
				if(that.isRotate){
					return false
				}else if(!that.idNumber){
					jewel.showToast('请输入正确的Id号')
				}else if(!that.idPassword){
					jewel.showToast('请输入密码');
				}else{
					let send_data = {
						user_id: that.idNumber,
						password: md5(that.idPassword)
					}
					that.isRotate=true
					setTimeout(() => {
						jewel.post('auth/loginById',send_data,false,function(res){
							that.isRotate = false
							if (res.data.code == 0){
								jewel.showToast(res.data.msg,500)
								uni.setStorage({ // 保存登录状态
									key: 'token',
									data: res.data.data.token,
									success() {
										uni.setStorage({ // 保存用户的信息
											key: 'userInfo',
											data: res.data.data.member,
											success() {
												//注册设备
												henglang.regPush(true);
											}
										});
									}
								});
								setTimeout(() => {
									uni.navigateBack()
								}, 500)
							}else{
								jewel.showToast(res.data.msg);
							}
						},function(res){
							that.isRotate=false
						});
					}, 1000);
				}
			},
			changeLoginType(type){
				if(type == 'register'){
					uni.navigateTo({
						url:'/pages/user/register'
					})
				}else{
					this.loginType = type
				}
			},
			// 登录方式切换
			loginChange() {
				// 置空处理
				this.mobile = '';
				this.yzm = '';
				this.mobile = '';
				this.password = '';
				this.clearText()
				uni.hideKeyboard()
				this.$nextTick(function() {
					this.isToggle = !this.isToggle;
				});
			},
			
			// 账号登录获取验证码
			getCode() {
				this.btnMsg = 's重发';
				if (!this.timer) {
					this.count = TIME_COUNT;
					this.timer = setInterval(() => {
						if (this.count > 0 && this.count <= TIME_COUNT) {
							this.count--;
						} else {
							clearInterval(this.timer);
							this.timer = null;
							this.count = '重新获取';
							this.btnMsg = '';
						}
					}, 1000);
					jewel.showToast('发送成功', 'success');
				}
			},
			pwdInput(e){
				this.isShowClear = e.detail.value != ''?true:false
			},
			//清空输入框内容
			clearText(){
				this.password = ''
				this.isShowClear = false
			},
			//清空按钮显示与隐藏
			isShowPwdClear(e){
				if(e.type == 'focus' && this.password != ''){
					this.isShowClear = true
				}else{
					this.isShowClear = false
				}
			}
		}
	}
</script>

<style scoped lang="less">
	.flex{
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		/* #ifndef APP-NVUE */
		flex-direction: row;
		/* #endif */
	}
	.flex1{
		flex: 1;
	}
	.flex-wrap{
		flex-wrap: wrap;
	}
	.f-a-start{
		align-items: flex-start;
	}
	.f-a-center{
		align-items: center;
	}
	.f-j-center{
		justify-content: center;
	}
	.f-j-between{
		justify-content: space-between;
	}
	.page{
		background-color: #FFFFFF;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	.loginBar {
		width: 100%;
		height: 88rpx;
		padding: 0 24rpx;
		box-sizing: border-box;
		position: absolute;
		top: var(--status-bar-height);
		left: 0;
		.bar-left {
			width: 42rpx;
			height: 42rpx;
			padding: 5rpx;
		}
		.bar-right {
			font-size: 32rpx;
			color: #333333;
		}
	}
	.loginBar-bg {
		width: 750rpx;
		height: 88rpx;
	}
	.logo-text {
		text-align: center;
		font-size: 38rpx;
		padding: 30rpx 0;
	}
	
	.userLogin-text{
		width: 664rpx;
		margin: 0 auto;
		padding: 20rpx 0;
		font-size: 28rpx;
	}

	.account {
		width: 750rpx;
		margin-top: 24rpx;
		.section {
			position: relative;
			width: 664rpx;
			border-bottom: 1px solid #dddddd;
			padding: 24rpx 0;
			input{
				font-size: 30rpx;
				color: #181818;
				height: 36rpx;
				border: 0;
				padding: 0;
				outline: none;
			}
			.pwd-forget{
				border-left: 1px solid #CCCCCC;
				font-size: 24rpx;
				color: #999999;
				padding-left: 20rpx;
				height: 26rpx;
				line-height: 26rpx;
			}
			.pwd-clearText{
				padding: 0 20rpx;
				opacity: 0;
			}
			.pwd-clearText-show{
				opacity: 1;
			}
			.getCodeBtn {
				color: #888888;
				border-width: 0rpx;
				font-size: 28rpx;
			}
			.isColor {
				color: #409eff;
			}
		}
	}
	
	
	.agreement {
		width: 750rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		font-size: 24rpx;
		padding: 20rpx 0;
		.text{
			color: #4c4c4c;
		}
		.navigate {
			padding: 10rpx 0;
			color: #d71311;
			font-size: 26rpx;
		}
	}
	

	.changType {
		width: 750rpx;
		padding: 30rpx 0;
		.btnText {
			height: 60rpx;
			line-height: 60rpx;
			text-align: center;
			font-size: 26rpx;
			color: #333333;
		}
	}

	.other-login{
		text-align: center;
		margin-bottom: 104rpx;
		.other-title{
			padding-bottom: 42rpx;
			position: relative;
			.line{
				position: absolute;
				top: 25rpx;
				left: 50%;
				margin-left: -332rpx;
				width: 664rpx;
				height: 1px;
				background-color: #b3b3b3;
			}
			.title-text{
				color: #999999;
				font-size: 28rpx;
				height: 50rpx;
				line-height: 50rpx;
				background-color: #FFFFFF;
				display: inline-block;
				position: relative;
				z-index: 10;
				padding: 0 30rpx;
			}
		}
		.login-item{
			margin: 0 50rpx;
			.text{
				display: inline-block;
				vertical-align: top;
				font-size: 30rpx;
				color: #4b4b4b;
				padding-top: 8rpx;
			}
			.icon {
				width: 64rpx;
				height: 53rpx;
				display: block;
				margin: 0 auto;
			}
		}
	}

	
	.loginBtn{
		width:664rpx;		height: 100rpx;
		color: #FFFFFF;
		background-color: #d71311;
		text-align: center;
		line-height: 100rpx;
		font-size: 28rpx;
		border-radius: 50px;
		margin-top: 80rpx;
		opacity: 0.4;
		transition-property: width;
		transition-duration: 0.4s;
		transition-delay: 0s;
		transition-timing-function: cubic-bezier(.57,.19,.51,.95);
	}
	.loginBtnOpacity{
		opacity: 1;
	}
	.loginBtnLoading {
		width:100rpx;
	}
	.btnLoading{
		width: 48rpx;
		height: 48rpx;
	}
	/* 旋转动画 */
	.rotate_loop{
		-webkit-transition-property: -webkit-transform;
	    -webkit-transition-duration: 1s;
	    -moz-transition-property: -moz-transform;
	    -moz-transition-duration: 1s;
	    -webkit-animation: rotate 1s linear infinite;
	    -moz-animation: rotate 1s linear infinite;
	    -o-animation: rotate 1s linear infinite;
	    animation: rotate 1s linear infinite;
	}
	@-webkit-keyframes rotate{from{-webkit-transform: rotate(0deg)}
	    to{-webkit-transform: rotate(360deg)}
	}
	@-moz-keyframes rotate{from{-moz-transform: rotate(0deg)}
	    to{-moz-transform: rotate(359deg)}
	}
	@-o-keyframes rotate{from{-o-transform: rotate(0deg)}
	    to{-o-transform: rotate(359deg)}
	}
	@keyframes rotate{from{transform: rotate(0deg)}
	    to{transform: rotate(359deg)}
	}
	
	.wxlogin-cont{
		background-image: url(../../static/images/jewel/wxlogin_bg.png);
		background-repeat: no-repeat;
		background-size: contain;
		width: 100%;
		min-height: 350rpx;
		&-img{
			width: 180rpx;
			height: 180rpx;
			margin-top: 245rpx;
		}
		&-text{
			text-align: center;
			width: 100%;
			color: #333333;
			font-size: 40rpx;
			line-height: 100rpx;
		}
	}
	.wxlogin-btn{
		width: 528rpx;
		height: 108rpx;
		text-align: center;
		color: #FFFFFF;
		font-size: 38rpx;
		background-color: #d71511;
		line-height: 108rpx;
		margin: 0 auto;
		border-radius: 50px;
		box-shadow: 0 2px 9px rgba(215,21,17, 0.65);
		margin-top: 125rpx;
		&-icon{
			width: 52rpx;
			height: 42rpx;
			margin-right: 22rpx;
		}
	}
	
</style>
